<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>选中的数据</title>
    <script src="/static/js/JsBarcode.all.min.js"></script>
    <!-- <style>
        .data-container {
            display: flex;
            flex-direction: column;
        }
        .data-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }
        .data-label {
            margin-right: 10px;
            font-weight: bold;
        }
        .data-value {
            flex-grow: 1;
        }
        .barcode {
            margin-left: 10px;
        }
        @media print {
            .data-row {
                page-break-inside: avoid;
            }
        }
    </style> -->
    <style>
        body{
            margin:0;
        }
        canvas{
            display: block !important;
            width: 300px !important;
            height: 30px !important;
        }
        .data-value
         @media print {
            @page {
          margin: 0.5cm;
          /* size:60mm 30mm; */
        }
            .data-row {
                page-break-inside: avoid;
            }
        }
    </style>
</head>
<body>
    <!-- <h1>选中的数据</h1> -->
    <div id="data-container" class="data-container">
        <!-- 数据行将在这里动态添加 -->
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var data = {{ data|safe }}; // 假设 data 是一个包含对象的数组

            var container = document.getElementById("data-container");

            data.forEach(function (rowData) {
                var row = document.createElement("div");
                row.className = "data-row";

                // 定义每个字段的标签和数据
                var contents = [
                    { label: "存货编码:", data: rowData["存货编码"] },
                    { label: "存货名称:", data: rowData["存货名称"] },
                    { label: "批号:", data: rowData["批号"] },
                    { label: "生产日期:", data: rowData["生产日期"] },
                    { label: "合格数量:", data: rowData["合格数量"] },
                    { label: "品牌:", data: rowData["品牌"] },
                    { label: "规格型号:", data: rowData["规格型号"] },
                ];

                contents.forEach(function (content, index) {
                    var label = document.createElement("div");
                    label.className = "data-label";
                    label.textContent = content.label;

                    var value = document.createElement("div");
                    value.className = "data-value";
                    value.textContent = content.data;

                    // 为需要的字段添加条形码
                    if (["存货编码:", "批号:"].includes(content.label)) {
                        var barcodeCanvas = document.createElement("canvas");
                        value.appendChild(barcodeCanvas);
                        JsBarcode(barcodeCanvas, content.data, { format: "CODE128" });
                        value.className += " barcode"; // 添加额外的样式类
                    }

                    row.appendChild(label);
                    row.appendChild(value);
                });

                container.appendChild(row);
            });
        });
    </script>
</body>
</html>